<!--评估任务 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" :xs="24">
        <el-row :gutter="10" class="task_top mb20">
          <div class="task_top_1">
            <p><svg-icon icon-class="peoples" /> {{detailData.evaluateQuestTitle}}</p>
            <span v-if="detailData.evaluateQuestContent">（描述：{{detailData.evaluateQuestContent}}）</span>
          </div>
          <div class="task_top_2">
            <span>业务：{{detailData.evaluateQuestBusiness}}</span>
            <span>评估任务：{{detailData.evaluateQuestIndexSum}}项</span>
            <span>评估周期：{{detailData.evaluateQuestCycle}}  <span v-if="detailData.evaluateQuestTriggerMonth"></span> （每月{{detailData.evaluateQuestTriggerMonth}}号{{detailData.evaluateQuestTriggerHours}}分）</span>
            <span v-if="detailData.startTime">开始时间：{{parseTime(detailData.startTime)}}</span>
            <span v-if="detailData.evaluateExpertNames">评估人员：{{detailData.evaluateExpertNames}}</span>
          </div>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="8" class="fl">
            <div>
              <el-upload action=""  :file-list="fileList" :show-file-list="false"  ref="upload" multiple auto-upload :http-request="uploadFile"  class="upload-demo">
                <el-button size="small" type="primary" icon="el-icon-upload">评估报告上传</el-button>
              </el-upload>
              <div class="ul" v-if="detailData.zhpgEvaluateTemplateList && detailData.zhpgEvaluateTemplateList.length > 0">
                <div class="li" v-for="(item,index) in detailData.zhpgEvaluateTemplateList" :key="index" style="display: flex;width: 500px;justify-content: space-between;align-items: center">
                    <p>{{item.evaluateTemplateTitle}}</p>
                    <div>
                      <el-button @click="handleFile('del',item)"  type="primary" plain icon="el-icon-delete" size="mini">删除</el-button>
                      <el-button @click="handleFile('down',item)"  type="primary" plain icon="el-icon-download" size="mini">下载</el-button>
                    </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="1.5" class="fr">
            <el-button type="primary" plain size="mini" @click="commit">提交</el-button>
          </el-col>
          <el-col :span="1.5" class="fr">
            <el-button type="primary" size="mini" @click="open = true">填写问题/风险</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableList" border>
          <el-table-column label="序号" width="50" align="center" type="index" />
          <el-table-column label="评估指标名称" align="center"  prop="evaluateIndexName" />
          <el-table-column label="指标值" align="center"  prop="evaluateIndexZdz" />
          <el-table-column label="是否专家评分" align="center"  prop="evaluateIndexIszj" />
          <el-table-column align="center" v-for="(item,index) in tableList" :key="index" :label="item['name' + index]">
            <template slot-scope="scope">
              <el-input v-model="scope.row['value' + index]" :value="scope.row['value' + index]"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div  style="height: 50px;display: flex;align-items: center;justify-content: center;">
          <!--          @current-change="onPageChange"-->
          <el-pagination :page-size="queryParams.pageSize" background layout="prev, pager, next" :total="total"></el-pagination>
        </div>
      </el-col>
    </el-row>
    <!-- 填写风险对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" label-suffix="：">
        <el-row>
          <el-col :span="24">
            <el-form-item label="业务">
              <span>{{detailData.evaluateQuestBusiness}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="目标政策">
              <span>{{detailData.evaluateQuestCorePolicy}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="提交人">
              <span>{{userInfo.nickName}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="类别" prop="evaluateRiskType">
              <el-select v-model="form.evaluateRiskType" clearable filterable placeholder="请选择类别">
                <el-option v-for="(item,index) in sendOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictLabel"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="风险名称" prop="evaluateRiskName">
              <el-input v-model="form.evaluateRiskName" placeholder="请输入风险名称" maxlength="20" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="风险详细" prop="evaluateRiskContent">
              <el-input type="textarea" v-model="form.evaluateRiskContent" placeholder="请输入风险详细" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="专家建议"  prop="evaluateRiskZjjy">
              <el-input type="textarea" v-model="form.evaluateRiskZjjy" placeholder="请输入专家建议"  />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addDange,
  queryDetailQuest,
  leaderPageList,
  expertPageList,
  riskType,
  zzCommit,
  zjCommit,
  uploadFileInter, downLoadInter, delFile
} from '@/api/eval'
import { closeLoading, openLoading, openMessage } from '@/utils'
  import { mapGetters } from 'vuex'
  export default {
    name: "task",
    dicts: ["sys_normal_disable", "sys_user_sex"],
    data() {
      return {
        search:'',
        fileList:[],
        total: 0,
        title: "问题/风险 情况填写",
        // 是否显示弹出层
        open: false,
        //数据
        tableList: [],
        loading:false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          hsitoryQuestId:'',
          userId:'',
        },
        rolesStr:'',
        detailData: {}, //详情
        form: {
          evaluateRiskBusiness:'',//业务
          evaluateQuestId:'',//评估任务表ID
          evaluateRiskName:'',//风险名称
          evaluateRiskContent:'',//风险详细
          evaluateRiskMbzc:'',//目标政策
          evaluateRiskZjjy:'',//专家/组长建议
          evaluateRiskType:'',//问题/风险类型&字典
          evaluateRiskSubId:'',//提交人ID
          evaluateRiskSubName:'',//提交人名称
        },
        rules: {
          evaluateRiskType:[{required:true,message:'请选择类别',trigger:'blur'}],
          evaluateRiskName:[{required:true,message:'请输入风险名称',trigger:'blur'}],
          evaluateRiskContent:[{required:true,message:'请输入风险详细',trigger:'blur'}],
          evaluateRiskZjjy:[{required:true,message:'请输入专家/组长建议',trigger:'blur'}],
        },
        sendOptions:[],
      }
    },
    created() {
      this.rolesStr = this.roles[0]
      riskType().then((res) => {
        this.sendOptions = res.data
      })
    },
    computed:{
      ...mapGetters(['roles','userInfo'])
    },
    mounted() {
      let {hsitoryQuestId,id} = this.$route.query
      this.queryParams.hsitoryQuestId = hsitoryQuestId
      this.queryParams.userId = id
      this.form.evaluateQuestId = id
      this.form.evaluateRiskSubName = this.userInfo.nickName
      this.form.evaluateRiskSubId = this.userInfo.userId
      if (id && hsitoryQuestId) {
        openLoading()
        this.queryDetail()
        this.queryList()
        closeLoading()
      }
    },
    methods: {
      // 取消按钮
      cancel() {
        this.open = false;
      },
      queryDetail() {
        queryDetailQuest(this.queryParams.userId).then(res => {
          if (res.code === 200) {
            this.detailData = res.data
            console.log('this.detailData',this.detailData)
            this.form.evaluateRiskMbzc = res.data.evaluateQuestCorePolicy
            this.form.evaluateRiskBusiness = res.data.evaluateQuestBusiness
          }
        })
      },
      handleFile(type,item) {
        switch (type) {
          case 'del' :
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              delFile(item.id).then(res => {

                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.queryDetail()
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
            break;
          case 'down':
            downLoadInter(item.id).then(result => {
              //创建一个Blob对象接收后端传来的文件流
              const blob = new Blob([result], {
                type: 'application/octet-stream'
              })
              const downloadElement = document.createElement('a')
              // 创建下载的链接
              const href = window.URL.createObjectURL(blob)
              downloadElement.href = href
              // 下载后文件名
              downloadElement.download = item.evaluateTemplateTitle
              document.body.appendChild(downloadElement)
              // 点击下载
              downloadElement.click()
              // 下载完成移除元素
              document.body.removeChild(downloadElement)
              // 释放掉blob对象
              window.URL.revokeObjectURL(href)
            })
            break;
        }
      },
      uploadFile(raw) {
        let fd = new FormData()
        fd.append('evaluateQuestId',this.$route.query.id)
        fd.append('file',raw.file)
        uploadFileInter(fd).then(({data}) => {
          openMessage('上传成功','success')
          this.queryDetail()
          // this.$refs.upload.clearFiles()
        })
      },
      queryList() {
        leaderPageList(this.queryParams).then((res) => {
          res.rows.forEach((item,index) => {
            item['indexId'] = item.id
            item['historyQuestId'] = item.hsitoryQuestId
            if (item.evaluateExpertSubContentZz && item.evaluateExpertSubContentZz.length > 0) {
              item.evaluateExpertSubContentZz.forEach((val,key) => {
                  item['name' + key] = val.name
                  item['value' + key] = val.value
              })
            }
          })
          this.tableList = res.rows
          this.total = res.total
        }).catch(err => {
          this.loading = false
        })
      },
      // 提交
      commit() {
        let list = JSON.parse(JSON.stringify(this.tableList))
        list.forEach((item) => {
            if (item.id) {
              delete item.id
              delete item.hsitoryQuestId
            }
        })
        zzCommit(list).then((res) => {
          if (res.code === 200) {
            openMessage('提交成功','success')
            setTimeout(()=>{
              this.$router.back()
            },1500)
          }else {
            openMessage('提交失败','error')
          }
        })
      },
      // 提交问题风险
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            addDange(this.form).then((res) => {
              if (res.code === 200) {
                openMessage('新增问题/风险成功','success')
                this.$refs.form.resetFields()
                setTimeout(() => {
                  this.cancel()
                },1500)
              }else {
                openMessage('新增失败','error')
              }
            })
          }
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__header {
    background-color: #354161;
    padding-bottom: 20px;
  }

  //::v-deep .el-dialog__footer {
  //  background-color: #f1f2f4;
  //  padding-top: 20px;
  //}

  ::v-deep .el-dialog__title {
    color: white;
  }

  ::v-deep .czlialog {
    margin-top: 20vh;
  }

  .flex-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .inner-container {
    width: 80%;
  }

  .info-row {
    height: 40px;
  }

  .flex-row {
    display: flex;
    align-items: center;
  }

  .label {
    width: 30%;
    text-align: right;
    margin-right: 10px;
    font-weight: 900;
  }

  .value {
    width: 70%;
  }

  /* Assuming el-input is a custom component, you might need additional styling */
  .input-field {
    width: 70%;
  }

  /* 头部 */
  .task_top {
    height: 150px;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    padding: 20px;
  }

  .task_top_1 {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .task_top_1 p {
    font-size: 20px;
    color: rgb(40, 121, 228);
    font-family: "微软雅黑";
    font-weight: bold;
  }

  .task_top_1 span {
    font-size: 15px;
    color: #bbb;
    font-family: "微软雅黑";
    margin-left: 20px;
    transform: translateY(3px);
  }

  .task_top_2 {
    margin-top: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 15px;
  }

  ::v-deep .el-select.el-select--medium {
    width: 100%;
  }

  ::v-deep .blue label {
    color: blue;
  }
</style>
